/* 我的考试(开始考试部分) */
<template>
    <div>
        <div style="height: 30px;">
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item :to="{ path: '/myExaminations' }">
                    <span @click="reback">{{ $t('myExams.myExam') }}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ $t('myExams.startExam') }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card v-loading="loading" shadow="never" body-style="padding: 10px;">
            <el-row style="padding:15px 15px 0 15px;" class="row-bg" justify="space-between">
                <div>
                    <span style="font-size:20px; color:#101010;">{{ $t('myExams.mockTest') }}</span>
                    <el-button style="float:right; margin-left:10px;" @click="reback">{{ $t('myExams.goBack') }}</el-button>
                </div>
            </el-row>
            <hr >
            <div class="box">
              <el-row>
                <el-col :span="18"><div class="grid-content bg-purple">
                  <div class="page">
                    <div v-for="(item,index) in dataLists" :key="index" :id="'page'+index" >
                      <p>{{item.questionIndex +'. ' +item.questionName}}</p>
                      <el-radio-group v-model="item.workContentst" @change="clickChange(index)">
                        <el-radio style="margin-left:20px" v-for="(items,indexs) in item.answerListVOList" :key="indexs" :label="items.optionCodes">{{items.optionCodes}}</el-radio>
                      </el-radio-group>
                    </div>
                  </div>
                </div>
                </el-col>
                <el-col :span="6">
                  <div class="grid-content bg-purple-light" style="overflow-y: scroll; height: 800px;">
                    <h2 style="margin-top: 20px; margin-left: 50px;" id=mytime>{{$t('myExams.examinationNew')}}： {{str}}</h2>
                    <h2 style="margin-left: 50px;">{{$t('myExams.common')}}<span style="font-weight: 600;">{{dataLists.length}}</span>{{$t('myExams.selection')}}:{{$t('myExams.has')}}<span style="font-weight: 600;">{{dataNum}}</span>{{$t('myExams.subject')}},{{$t('myExams.notAnswer')}}<span style="font-weight: 600;">{{dataLists.length-dataNum}}</span>{{$t('myExams.subject')}}</h2>
                      <div class="btns">
                        <a v-for="(item,index) in dataLists" :key="index" @click="submit(index)" :href="'#page'+index" 
                        :style="{'background-color': item.secondType,'color': item.color}">{{index+1}}</a> 
                    </div>  
                    <el-button style="margin-top:20px;margin-left: 5px;" type="primary" @click="submitS">{{$t('myExams.commit')}}</el-button>
                </div>
                </el-col>
              </el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils';
import filters from "common/src/filters";
import myExaminationsApi from 'common/src/api/academicBehaviorNorms/myExaminations/myExaminations';
import mixin from 'common/src/mixins/index';
export default {
    mixins: [mixin],
    props: {
      dataList: {
          type: Array,
          default: () => {}
      },
      dataObj: {
          type: Object,
          default: () => {}
      }
    },
    data() {
      return {
        h:0,//定义时，分，秒，毫秒并初始化为0；
        m:0,
        ms:0,
        s:0,
        time:0,
        str:'',
        mytime:'',
        showIndex:null,
        form: {},
        dataLists: [],
        lastIndex: 0,
        queryForm: {
          studentId: ''
        },
        startTime: null,
        dataNum: 0,
        dataNums: 0,
        options: {
          faculty: [], // 学院
          approver: [],
          profession: [], // 竞赛名称
          degreeType: [ ] // 竞赛级别
        },
      }
    },
   
    mounted() {
      // if (this.global.mockUser) {
        this.queryForm.studentId = this.global.currentUser.uid
      // }
      this.time=setInterval(this.timer,50);
      if (this.dataList) {
        this.dataList.forEach(el => {
          el.secondType = '#edf1f5'
          el.color = 'black'
          el.answerListVOList.forEach((ele,index) => {
            ele.optionCodes = ele.optionCode+'：'+ele.optionContent
          })
        })
        this.dataLists = this.dataList
      }
    },
    methods: {
      
      reback() {
        this.$emit('change-exam')
      },
      submitS() {
        if (this.dataLists.length-this.dataNum===0) {
          this.$confirm(`${this.$t('myExams.parent')}，${this.$t('myExams.common')}${this.dataLists.length}${this.$t('myExams.answered')}`,this.$t('myExams.warmPromp'), {
            confirmButtonText: this.$t('myExams.confirm'),
            cancelButtonText: this.$t('myExams.cancel'),
            type: 'warning'
          }).then(() => {
            let dataTimeA = this.dataList[0].examTime?this.dataList[0].examTime:filters.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss")
            let aTime = new Date(dataTimeA).getTime()/1000
            let hour = this.str.split(':')[0];
            let min = this.str.split(':')[1];
            let sec = this.str.split(':')[2];
            let s = Number(hour * 3600) + Number(min * 60) + Number(sec);
            let dataTime = aTime + s
            let dataTimes = filters.formatDate(dataTime*1000, "yyyy-MM-dd hh:mm:ss")
            let obj = {
              studentId: this.queryForm.studentId,   // this.global.user.uid
              examId: this.dataObj.examId,
              questionNum: this.dataObj.questionNum,
              startTime: this.dataList[0].examTime?this.dataList[0].examTime:filters.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
              endTime: dataTimes,
              answerRecordDTOList: [],
              questionIdList: []
            }
            this.dataLists.forEach(el => {
              el.answerListVOList.forEach(ele => {
                if (el.workContentst==ele.optionCodes) {
                  obj.answerRecordDTOList.push(
                    {
                      "index": el.questionIndex,
                      "questionId": el.id,
                      "answer": ele.optionCode
                    }
                  )
                  obj.questionIdList.push(el.id)
                }
              })
            })
            myExaminationsApi.submitExamRecordByStudent(obj).then(res => {
              this.$message({
                type: 'success',
                message: this.$t('myExams.successfully')
              });
              this.reback()
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: this.$t('myExams.cancelOperat')
            });          
          });
        } else {
          this.$confirm(`${this.$t('myExams.parent')}，${this.$t('myExams.common')}${this.dataLists.length}${this.$t('myExams.questions')},${this.$t('myExams.haveAnswered')}${this.dataNum}${this.$t('myExams.way')},${this.$t('myExams.still')}${this.dataLists.length-this.dataNum}${this.$t('myExams.submit')}`, this.$t('myExams.warmPromp'), {
            confirmButtonText: this.$t('myExams.confirm'),
            cancelButtonText: this.$t('myExams.cancel'),
            type: 'warning'
          }).then(() => {
            let dataTimeA = this.dataList[0].examTime?this.dataList[0].examTime:filters.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss")
            let aTime = new Date(dataTimeA).getTime()/1000
            let hour = this.str.split(':')[0];
            let min = this.str.split(':')[1];
            let sec = this.str.split(':')[2];
            let s = Number(hour * 3600) + Number(min * 60) + Number(sec);
            let dataTime = aTime + s
            let dataTimes = filters.formatDate(dataTime*1000, "yyyy-MM-dd hh:mm:ss")
            let obj = {
              studentId: this.queryForm.studentId,   // this.global.user.uid
              examId: this.dataObj.examId,
              questionNum: this.dataObj.questionNum,
              startTime: this.dataList[0].examTime?this.dataList[0].examTime:filters.formatDate(new Date(), "yyyy-MM-dd hh:mm:ss"),
              endTime: dataTimes,
              answerRecordDTOList: [],
              questionIdList: []
            }
            this.dataLists.forEach(el => {
              el.answerListVOList.forEach(ele => {
                if (el.workContentst==ele.optionCodes) {
                  obj.answerRecordDTOList.push(
                    {
                      "index": el.questionIndex,
                      "questionId": el.id,
                      "answer": ele.optionCode
                    }
                  )
                  obj.questionIdList.push(el.id)
                } else if(!el.workContentst) {
                  obj.answerRecordDTOList.push(
                    {
                      "index": el.questionIndex,
                      "questionId": el.id,
                      "answer": ''
                    }
                  )
                }
              })
            })
            let objs = {};
            let peon = obj.answerRecordDTOList.reduce((cur,next) => {
                objs[next.questionId] ? "" : objs[next.questionId] = true && cur.push(next);
                return cur;
            },[])
            obj.answerRecordDTOList = peon
            myExaminationsApi.submitExamRecordByStudent(obj).then(res => {
              this.$message({
                type: 'success',
                message: this.$t('myExams.successfully')
              });
              this.reback()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: this.$t('myExams.cancelOperat')
            });          
          });
        }
        
      },
      clickChange(val) {
        this.lastIndex = val
        if (this.lastIndex !==val+1) {
          if (this.dataLists[val].color!=='#409EFF') {
            this.dataNum = this.dataNum + 1 
          }
        }
        this.dataLists[val].secondType = 'rgb(204, 222, 241)'
        this.dataLists[val].color = '#409EFF'
      },
      submit(num) {
        window.location.hash = '#page'+num; 
      },
      timer() {   //定义计时函数
        this.ms=this.ms+50;         //毫秒
        if(this.ms>=1000){
            this.ms=0;
            this.s=this.s+1;         //秒
        }
        if(this.s>=60){
            this.s=0;
            this.m=this.m+1;        //分钟
        }
        if(this.m>=60){
            this.m=0;
            this.h=this.h+1;        //小时
        }
        this.str = this.toDub(this.h)+":"+this.toDub(this.m)+":"+this.toDub(this.s)+""/*+this.toDubms(this.ms)+"毫秒"*/;
      },
      toDub(n){  //补0操作
        if(n<10){
          return "0"+n;
        }
        else {
          return ""+n;
        }
      },
    }
}
</script>

<style scoped>
.btns a {
    padding-top: 10px;
    width: 36px;
    height: 36px;
    display: inline-block;
    text-align: center;
    margin-left: 5px;
    border: solid 1px #b2b3b5;
    margin-top: 5px;
}
.page div{
  width: 100%;
  min-height: 100px;
}
.page {
  overflow-y: scroll;
  height: 800px;
}
</style>